<template>
  <div class="banner-container">
    <el-carousel height="550px" interval="5000" arrow="always" v-if="imgList.length!=0">
        <el-carousel-item v-for="item in imgList" :key="item.id">
            <a :href="item.hrefUrl">
                <el-image style="height:550px;" :src="item.imgUrl" fit="cover"/>
            </a>
        </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { ElCarousel, ElCarouselItem, ElImage } from 'element-plus'
export default {
  name: 'VmBanner',
  components: {
    ElCarousel,
    ElCarouselItem,
    ElImage
  },
  props: {
    imgList: {
        type: Array,
        default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
.banner-container {
    width: 100%;
    height: 550px;
}
.el-carousel::v-deep {
     .el-carousel__indicators--horizontal {
        bottom: 5%;
        .el-carousel__button {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #928a97;
        }
        .is-active {
            .el-carousel__button {
                background: #fdfdfd;
                height: 15px;
            }    
        }
    }
}

</style>>
